<template>
  <a-card :bordered="false" class="card-area">
    <div :class="advanced ? 'search' : null">
      <!-- 搜索区域 -->
      <a-form layout="horizontal">
        <a-row>
          <a-col :md="8" :sm="12">
            <a-form-item label="发卡机构标识" :labelCol="{span: 5}" :wrapperCol="{span: 14, offset: 1}">
              <a-input v-model="queryParams.issuerCode"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="12">
            <a-form-item label="发卡机构名称" :labelCol="{span: 5}" :wrapperCol="{span: 14, offset: 1}">
              <a-input v-model="queryParams.issuerName"/>
            </a-form-item>
          </a-col>
          <span style="float: left; margin-top: 3px;">
            <a-button type="primary" @click="search">查询</a-button>
            <a-button style="margin-left: 8px" @click="reset">重置</a-button>
          </span>
        </a-row>
      </a-form>
    </div>
    <div>
      <div class="operator">
        <a-button v-hasPermission="['pbininfo:add']" type="primary" @click="add">新增</a-button>
        <a-button v-hasPermission="['pbininfo:export']" type="primary" @click="exportExcel">导出</a-button>
      </div>
      <!-- 表格区域 -->
      <a-table ref="TableInfo"
               :columns="columns"
               :rowKey="record => record.id"
               :dataSource="dataSource"
               :pagination="pagination"
               :loading="loading"
               :scroll="{ x: 900 }"
               :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
               @change="handleTableChange">
        <template slot="operation" slot-scope="text, record">
          <a-icon v-hasPermission="['pbininfo:update']" type="setting" style="color: #4a9ff5" @click="edit(record)"
                  title="修改"/>&nbsp;&nbsp;
          <a-icon type="eye" style="color: #42b983" @click="view(record)" title="详情"/>&nbsp;&nbsp;
        </template>
      </a-table>
    </div>
    <!-- 修改黑名单信息 -->
    <PBinInfoInput
      ref="PBinInfoInput"
      @success="handlePBinInfoInputSuccess"
      @close="handlePBinInfoInputClose"
      :pBinInfoInputVisiable="pBinInfoInputVisiable">
    </PBinInfoInput>
  </a-card>
</template>

<script>
    import RangeDate from '../../../../components/datetime/RangeDate'
    import PBinInfoInput from './PBinInfoInput'

    const formItemLayout = {
        labelCol: {span: 5}
    }
    export default {
        name: 'PBinInfo',
        components: {PBinInfoInput, RangeDate},
        data() {
            return {
                advanced: false,
                dataSource: [],
                formItemLayout,
                selectedRowKeys: [],
                queryParams: {},
                sortedInfo: null,
                paginationInfo: null,
                pagination: {
                    pageSizeOptions: ['10', '20', '30', '40', '100'],
                    defaultCurrent: 1,
                    defaultPageSize: 10,
                    showQuickJumper: true,
                    showSizeChanger: true,
                    showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
                },
                loading: false,
                pBinInfoInputVisiable: false,
            }
        },
        computed: {
            columns() {
                let {sortedInfo} = this
                sortedInfo = sortedInfo || {}
                return [{
                    title: '发卡机构标识',
                    dataIndex: 'issuerCode'
                }, {
                    title: '发卡机构名称',
                    dataIndex: 'issuerName'
                }, {
                    title: '卡名称',
                    dataIndex: 'cardName',
                }, {
                    title: '卡号长度',
                    dataIndex: 'cardNoLen',
                },  {
                    title: '卡BIN',
                    dataIndex: 'binNo',
                },  {
                    title: '卡BIN长度',
                    dataIndex: 'binLen',
                },  {
                    title: '卡BIN状态',
                    dataIndex: 'binStatus',
                    customRender: (text, row, index) => {
                        switch (text) {
                            case '0':
                                return '不可用'
                            case '1':
                                return '可用'
                            default:
                                return text
                        }
                    }
                },  {
                    title: '银联品牌标识',
                    dataIndex: 'cupLogoFlag',
                    customRender: (text, row, index) => {
                        switch (text) {
                            case 'Y':
                                return '银联品牌'
                            case 'N':
                                return '非银联品牌'
                            default:
                                return text
                        }
                    }
                },  {
                    title: '卡类型',
                    dataIndex: 'cardType',
                    customRender: (text, row, index) => {
                        switch (text) {
                            case '1':
                                return '借记卡'
                            case '2':
                                return '贷记卡'
                            case '3':
                                return '准贷记卡'
                            case '4':
                                return '预付卡'
                            default:
                                return text
                        }
                    }
                }, {
                    title: '卡属性',
                    dataIndex: 'cardAttr',
                    customRender: (text, row, index) => {
                        switch (text) {
                            case '1':
                                return '对私卡'
                            case '2':
                                return '对公卡'
                            default:
                                return text
                        }
                    }
                }, {
                    title: '操作',
                    dataIndex: 'operation',
                    scopedSlots: {customRender: 'operation'},
                    fixed: 'right',
                    width: 130
                }]
            }
        },
        mounted() {
            this.reset();
            this.fetch()
        },
        methods: {
            onSelectChange(selectedRowKeys) {
                this.selectedRowKeys = selectedRowKeys
            },
            view(record) {
                this.pBinInfoInputVisiable = true
                this.$refs.PBinInfoInput.setFormValues(record,"view")
            },
            handlePBinInfoInputClose() {
                this.pBinInfoInputVisiable = false
            },
            handlePBinInfoInputSuccess() {
                this.pBinInfoInputVisiable = false
                this.$message.success('修改成功')
                this.fetch()
            },
            add() {
                var data = {};
                this.pBinInfoInputVisiable = true
                this.$refs.PBinInfoInput.setFormValues(data,"add")
            },
            edit(record) {
                this.pBinInfoInputVisiable = true
                this.$refs.PBinInfoInput.setFormValues(record,"update")
            },
            handleTableChange(pagination, filters, sorter) {
                // 将这三个参数赋值给Vue data，用于后续使用
                this.paginationInfo = pagination
                this.sortedInfo = sorter

                // this.instInfo.visiable = false
                this.fetch({
                    sortField: sorter.field,
                    sortOrder: sorter.order,
                    ...this.queryParams,
                    ...filters
                })
            },

            search() {
                let {sortedInfo} = this
                let sortField, sortOrder
                // 获取当前列的排序和列的过滤规则
                if (sortedInfo) {
                    sortField = sortedInfo.field
                    sortOrder = sortedInfo.order
                }
                this.fetch({
                    sortField: sortField,
                    sortOrder: sortOrder,
                    ...this.queryParams
                })
            },
            exportExcel() {
                let {sortedInfo} = this
                let sortField, sortOrder
                // 获取当前列的排序和列的过滤规则
                if (sortedInfo) {
                    sortField = sortedInfo.field
                    sortOrder = sortedInfo.order
                }
                this.$export('param/pbininfo/excel', {
                    sortField: sortField,
                    sortOrder: sortOrder,
                    ...this.queryParams
                })
            },
            reset() {
                // 取消选中
                this.selectedRowKeys = []
                // 重置列排序规则
                this.sortedInfo = null
                // 重置查询参数
                this.queryParams = {}
                this.fetch()
            },

            fetch(params = {}) {
                this.loading = true
                if (this.paginationInfo) {
                    // 如果分页信息不为空，则设置表格当前第几页，每页条数，并设置查询分页参数
                    this.$refs.TableInfo.pagination.current = this.paginationInfo.current
                    this.$refs.TableInfo.pagination.pageSize = this.paginationInfo.pageSize
                    params.pageSize = this.paginationInfo.pageSize
                    params.pageNum = this.paginationInfo.current
                } else {
                    // 如果分页信息为空，则设置为默认值
                    params.pageSize = this.pagination.defaultPageSize
                    params.pageNum = this.pagination.defaultCurrent
                }
                this.$get('param/pbininfo', {
                    ...params
                }).then((r) => {
                    let data = r.data
                    this.loading = false
                    this.dataSource = r.data.rows
                    const pagination = {...this.pagination}
                    pagination.total = data.total
                    this.pagination = pagination
                })
            },
            instOn(record) {
                if ('02' !== record.validStatus) {
                    this.$message.error("当前记录非注销状态，不能启用")
                    return
                }
                this.$put("inst/turnOn/" + record.id, {}).then(r => {
                    this.$message.success("启用成功")
                    this.fetch()
                })
            },
        }
    }
</script>

<style lang="less" scoped>
  @import "../../../../../static/less/Common";

  .width_70 {
    width: 70%;
  }
</style>
